<script type="text/x-template" id="audio-settings">
    <template>
        <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" @contextmenu.self="app.resetState()">
            <div class="modal-window">
                <div class="modal-header">
                    <div class="modal-title">{{app.getLz('term.audioSettings')}}</div>
                    <button class="close-btn" @click="app.resetState()"></button>
                </div>
                <div class="modal-content">
                    <button class="playlist-item"
                            @click="openEqualizer()" style="width:100%;">
                        <div class="icon"><%- include("../svg/speaker.svg") %></div>
                        <div class="name">{{app.getLz('term.equalizer')}}</div>
                    </button>
                    <button class="playlist-item"
                            @click="openSpacialAudio()" style="width:100%;">
                        <div class="icon"><%- include("../svg/speaker.svg") %></div>
                        <div class="name">{{app.getLz('settings.option.audio.enableAdvancedFunctionality.audioSpatialization')}}</div>
                    </button>
                </div>
            </div>
        </div>
    </template>
</script>

<script>
    Vue.component('audio-settings', {
        template: '#audio-settings',
        data: function () {
            return {
                app: this.$root,
            }
        },
        props: {},
        mounted() {},
        methods: {
            openEqualizer() {
                app.modals.equalizer = true
                app.modals.audioSettings = false
            },
            openSpacialAudio() {
                if(app.cfg.audio.spatial) {
                    app.modals.spatialProperties = true
                    app.modals.audioSettings = false
                } else {
                    notyf.error(app.getLz('spatial.notTurnedOn'))
                }
            },
        }
    });
</script>